<template>
    <div>
        <van-nav-bar title="影院" @click-left="handleCitys" @click-right="handleCinemasSearch">
            <template #left>
                <span class="citys">{{ $store.state.cityName }}</span>
                <van-icon name="arrow-down" />
            </template>
            <template #right>
                <van-icon name="search" size="25" />
            </template>
        </van-nav-bar>
        <div class="box" v-height>
        <van-list class="cinemaslist">
            <van-cell v-for="data in $store.state.cinemaList" :key="data.cinemaId" class="cinemasItem">
                <div class="cinemasLeft">
                    <span class="cinemasName">{{ data.name }}</span>
                    <span class="cinemasAddress">{{ data.address }}</span>
                </div>
                <div class="cinemasRight">
                    <span class="cinemasLowPrice">￥{{ data.lowPrice/100 }}起</span>

                </div>
            </van-cell>
        </van-list>
    </div>
    </div>
</template>
<script>
import BetterScroll from 'better-scroll'
import { createApp, nextTick } from 'vue';
import { NavBar,List} from 'vant';
import http from '@/util/http';

const app = createApp();
app.use(NavBar);
app.use(List);
export default {
    data(){
        return {

        }
    },
    components: {

    },
    directives: {
        Height:{
            mounted(el){
                el.style.height = document.documentElement.clientHeight - 50 - 50 + 'px'
            }
        }
    },
    mounted(){
        if(this.$store.state.cinemaList.length == 0 ){
            this.$store.dispatch('getCinemaData')
            .then(res => {
                this.$nextTick(() => {
                    new BetterScroll('.box', {
                        scrollbar: {
                            fade: true
                        }
                    })
                })
            })
        }else {
            this.$nextTick(() => {
                // console.log('实例化betterScroll')
                new BetterScroll('.box', {
                scrollbar: {
                    fade: true
                }
                })
            })
        }
        
    },
    methods:{
        handleCitys(){
            this.$router.push({
                path: '/citys',
            })
        },
        handleCinemasSearch(){
            this.$router.push({
                path: '/cinemasSearch',
            })
        }
    }
}
</script>
<style lang="scss" scoped>
.cinemaslist {
    box-sizing: border-box;
    text-align: left;
    .cinemasItem{
        clear: both;
        padding: 15px;
        width: 100%;
        overflow: hidden;
        box-sizing: border-box;
        .cinemasLeft {
            float: left;
            display: flex;
            flex-direction: column;
            width: 80%;
            .cinemasName{
            font-size: 15px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            width: 70%;
            }
            .cinemasAddress{
                font-size: 12px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            width: 70%;
            margin-top: 5px;
            color: gray;
            }
        }
    .cinemasRight{
        float: right;
        display: flex;
        flex-direction: column;
        width: 20%;
        box-sizing: border-box;
        .cinemasLowPrice{
            color: red;
            text-align: right;
        }
    }
    }
}
.box{
    // height: 500px;
    overflow: hidden;
    position: relative;
    text-align: left;
}

</style>